<template>
  <header id="app-header" :class="[whiteBg]">
    <LogoVue />
    <NavVue class="flex-1" />
    <ButtonsVue />
  </header>
</template>

<script setup lang="ts">
import { computed, defineAsyncComponent } from "vue";
import { useRoute } from "vue-router";
const ButtonsVue = defineAsyncComponent(
  () => import("./components/Buttons.vue")
);
const LogoVue = defineAsyncComponent(() => import("./components/Logo.vue"));
const NavVue = defineAsyncComponent(() => import("./components/Nav.vue"));
const route = useRoute();
const whiteBgRoutes = ["/new_profile"];
const whiteBg = computed(() => {
  let className = "";
  whiteBgRoutes.map((item) => {
    if (route.path.includes(item)) {
      className = "white-bg";
    }
  });
  return className;
});
</script>
<style lang="less">
header {
  &.white-bg {
    background-color: #fff !important;
    .user-logo {
      background-color: #fff !important;
    }
  }
}
</style>
<style scoped lang="less">
header {
  position: sticky;
  padding: 0 20px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--yd-header-height);
  border-bottom: 1px solid #ccd6de;
  background-color: #f6f8fa;
}

@media screen and (max-width: 768px) {
  header {
    padding: 0 64px;
  }
}
</style>
